<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音乐播放</title>
    <style type="text/css">

        body
        
        { 
        
      
        
        background-image: url(5.jpg);
        
        }
        
        </style>
        
</head>
<body>
<div style="background-color:rgba(28, 235, 217, 0.877);font-size:xx-large;position: absolute;  left:550px; 
top: 20px;">新概念阴游</div>
<p id="demo">地址</p>
<input id="btn" type="button" onclick="playmp3()" value="开始"/>
<button  id ="kong" onClick ="tap()"  style="background-color: aliceblue;position : absolute;width: 200px;height: 200px;border-radius: 50%; left:500px; 
top: 500px;">"戳我"</button>
<audio id="audio1" controls="controls">
    <!--    <source src="金﨑猛 - 神よ、その黄昏よ.mp3" type="audio/ogg">-->
    <source src="金﨑猛 - 神よ、その黄昏よ.mp3" type="audio/ogg">
    Your browser does not support the audio tag.
</audio>
<div id="board1" style="position: absolute; width:80px; height:10px; left:1024px; 
        top: 300px; "> <img src="shoot.gif" alt="" width="300" height="300";> </div>
<div id="monster" style="position: absolute;width: 200px;height: 200px;border-radius: 50%; left:0px; 
top: 0px; "> <img src="kk.jpeg" alt="" width= "100px";height= "100px";border-radius=" 50%"; ></div>
<div id="score" style="width:200px; height:10px; position:absolute; left:900px; 
font-family:'草书'; font-size: 30px;">分数：0</div>
</body>
</html>
<script src="js/jquery.min.js"></script>
<script>
 setInterval(function(){moveBoard0(monster)},1);
function moveBoard(board)
            {
                var t1 = board.offsetTop;
                if(t1<=0)
                {
                    // 如果board移到最上面了，就随机换个水平位置，再移到最下面
                    //t2 = Math.floor(Math.random() * (720- 420) + 420);
                    //board.style.left = t2 + "px";
                   // board.style.top = "555px";
                   // fenshu += 1; //分数增加1
                    //document.getElementById("score").innerHTML = "分数：" + fenshu;
                    
                    board.style.top = board.offsetTop + 400 + "px"
                }
                    // 
                else
                    board.style.top = board.offsetTop - 1 + "px";
            }
            function moveBoard0(board)
            {
                var t2 = board.offsetTop;
                if(t2<500)
                      board.style.top = board.offsetTop + 1 + "px";
               
                    
               
                      
               
                   
            }
        var fenshu=0;
        var second=0;
    var audio = document.getElementById('audio1');
    var btn1 = document.getElementById('btn');
    playmp3 = function () {
        tap();
        
        if (audio !== null) {
            //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
            // alert(audio.paused);
            if (audio.paused) {
                btn1.value = "暂停";
                audio.play();//audio.play();// 这个就是播放

            } else {
                btn1.value = "开始";
                audio.pause();// 这个就是暂停
            }
        }
    }
        var flag=false;
        var flag1=false;
        tap=function()
        {   /*var imgobj=document.querySelector("img");
            imgobj.addEventListener("click",f/unction(){
               this.src ="shoot.gif";           
        })*/ 
        if(!flag){
           var mywar= setInterval(function(){moveBoard(board1)},1);
            flag=true;
        }           
        if(!flag1)
        {
            setInterval(function(){  second=second+1;},1000);
               flag1=true;}
         if(second==3||second==8||second==11||second==13||second==17||second==22||second==23||second==26||second==28||second==30||second==33||second==37||second==40||second==44||second==47||second==50||second==51||second==53||second==60||second==62||second==64||second==67)
         {     fenshu++;
                        document.getElementById("score").innerHTML = "分数：" + fenshu;
                        flag=false;
                    }
         else
         {
            fenshu--;
                        document.getElementById("score").innerHTML = "分数：" + fenshu;
                   
                    clearInterval(mywar)}
         
        }
      
    

</script>